<template>
  <div>
      <div class="table-row display-fx-center">
            <div class="tr per100 display-fx-center">
                <div class="td" style="width:202px">
                      <span>本年度职业健康检查开展情况</span>
                </div>
                <div class="full">
                       <div>{{infoData.basicInfo.blnAnnualExam?'展开':'未展开'}}</div>
                </div>
            </div>
        </div>

      <el-table :data="infoData.examOrgList" border >
              <el-table-column label="检测机构名称" align="center" prop="orgName" width="522" />
              <el-table-column label="社会信用代码" align="center" prop="orgCreditCode" />
              <el-table-column label="检查总结报告编号" align="center" prop="reportCode" />
      </el-table>
      <div v-for="(item,index) in infoData.examInfoList" :key="index">
                 <div class="table-row display-fx-center">
            <div class="tr display-fx-center">
                <div class="td" style="width:161px">
                      <span>{{item.type?item.type:'因素'}}</span>
                </div>
                <div class="full" style="border-right:none">
                        检测
                </div>
            </div>
            <div class="tr display-fx-center" style="width:748px;flex-shrink: 0;">
                <div class="td" style="width:161px">
                      <span>体检总人数</span>
                </div>
                <div class="full" style="border-right:none">
                       {{item.examPersonnelNum}}
                </div>
            </div>
        </div>

      <el-table :data="item.factorList" border >
              <el-table-column label="检测危害因素" align="left" prop="factor" width="822"/>
              <el-table-column label="体检人数" align="center" prop="examPersonnelNum" />
      </el-table>
      </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
          factorListItem:{}
      };
    },
     props:{
      infoData:{
          type:Object,
          default:()=>{}
        },     
     },
    watch:{
     infoData: {
     handler(val) {
            if(val){
                this.factorListItem = this.infoData.factorList[0]
            }
        },
        deep: true
     },
   },
    created() {

    },
    methods: {
           factorListItemFilter(item){
            if(item.examOrgName || item.examOrgCreditCode || item.examOrgCode){
                 return [item]
            }else{
                 return []
            }
        }
    }
  };
</script>
<style lang="scss" scoped>
         .display-fx-center{
             display: flex;
             align-items: center;
         }
         .per100{
             width: 100%!important;
          }
          .per33{
              width: 33.333333333%!important;
          }
          .table-row{
                font-size: 14px;
                .tr{
                    width: 50%;
                    height: 60px;
                    display: flex;
                    .td{
                      text-align: right;
                      width: 161px;
                      height: 100%;
                      border: solid 1px #dfe6ec;
                      color: #797C84;
                      background-color:#F4F8FF;
                      border-top:none;
                      border-right:none;
                      padding: 8px;
                      flex-shrink: 0;
                      @extend .display-fx-center;
                  }
                  .full{
                        width: 100%;
                        height: 100%;
                        line-height: 60px;
                        border: solid 1px #dfe6ec;
                        border-top:none;
                        padding: 0 10px;
                        @extend .display-fx-center;
                        
                    }
                } 
  
          }


           ::v-deep{
            .el-table__header-wrapper th{
                 background: #F4F8FF!important;    
           }
          //  鼠标移入表格行不变色
          .el-table .el-table__row:hover td {
            background-color: transparent !important;
          }
          .el-table--border{
                 border-top:none!important;
           }
           .has-gutter .el-table__cell{
                  padding: 13px 0!important;    
           }
            .el-table__row .el-table__cell{
                 padding: 18px 0!important;
           }
        }

</style>
